<script setup lang="ts">
import { dissolveCommunity } from '@/api/community';
import { router } from '@/router';
import { showConfirmDialog, showDialog, showNotify } from 'vant';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const communityId = ref('');
const loading = ref(false);

onMounted(() => {
    const route = useRoute();
    const id = route.query.id;
    if (id != undefined && !Array.isArray(id)) {
        communityId.value = id;
    } else {
        showNotify({
            type: 'danger',
            message: '社区ID不存在',
            position: 'top'
        });
        router.push('/community');
    }
})

const dissolve = async () => {
    try {
        await showConfirmDialog({
            title: '解散社区',
            message: '确定要解散该社区吗？此操作无法撤销，所有社区内容将被删除。',
            confirmButtonText: '确认解散',
            confirmButtonColor: '#ee0a24'
        });
        
        loading.value = true;
        await dissolveCommunity(communityId.value);
        
        showNotify({
            type: 'success',
            message: '社区已解散',
            position: 'top'
        });
        
        router.push("/community");
    } catch (error) {
        if (error !== 'cancel') {
            console.error('解散社区失败:', error);
            showNotify({
                type: 'danger',
                message: '解散社区失败',
                position: 'top'
            });
        }
    } finally {
        loading.value = false;
    }
}

const goBack = () => {
    router.back();
}
</script>

<template>
    <div class="community-settings-page">
        <!-- 页面标题和返回按钮 -->
        <div class="page-header">
            <button class="back-button" @click="goBack">
                <van-icon name="arrow-left" />
            </button>
            <h1 class="page-title">社区设置</h1>
            <div class="placeholder"></div>
        </div>
        
        <div class="settings-content">
            <div class="settings-section">
                <div class="section-title">基本设置</div>
                
                <div class="settings-group">
                    <van-cell 
                        title="社区信息" 
                        is-link 
                        to="/community/edit"
                        :disabled="true"
                    />
                    
                    <van-cell 
                        title="成员管理" 
                        is-link 
                        to="/community/members"
                        :disabled="true"
                    />
                </div>
            </div>
            
            <div class="settings-section danger-zone">
                <div class="section-title">危险操作区</div>
                
                <div class="settings-group">
                    <van-cell title="解散社区">
                        <template #right-icon>
                            <van-button 
                                type="danger" 
                                size="small" 
                                :loading="loading"
                                @click="dissolve"
                            >
                                {{ loading ? '处理中...' : '解散社区' }}
                            </van-button>
                        </template>
                    </van-cell>
                </div>
                
                <div class="danger-notice">
                    <van-icon name="warning-o" />
                    <span>解散社区后，所有内容将被永久删除且无法恢复</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.community-settings-page {
    background-color: #f7f8fa;
    min-height: calc(100vh - 108px);
    
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background-color: white;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        
        .back-button {
            width: 36px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: transparent;
            border: none;
            cursor: pointer;
            border-radius: 50%;
            
            &:hover {
                background-color: #f2f3f5;
            }
            
            .van-icon {
                font-size: 20px;
            }
        }
        
        .page-title {
            font-size: 18px;
            font-weight: 600;
            color: #323233;
            margin: 0;
        }
        
        .placeholder {
            width: 36px;
        }
    }
    
    .settings-content {
        padding: 16px;
        max-width: 768px;
        margin: 0 auto;
        
        .settings-section {
            margin-bottom: 24px;
            
            &.danger-zone {
                margin-top: 32px;
            }
            
            .section-title {
                font-size: 16px;
                font-weight: 600;
                color: #323233;
                margin-bottom: 12px;
                padding: 0 16px;
            }
            
            .settings-group {
                background-color: white;
                border-radius: 8px;
                overflow: hidden;
            }
            
            .danger-notice {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 12px 16px;
                font-size: 12px;
                color: #ee0a24;
                
                .van-icon {
                    flex-shrink: 0;
                }
            }
        }
    }
}
</style>